<div class="main-section">
    <h1 class="main-section__title">Data table</h1>

    <p class="main-section__intro">
        <code>lx-data-table</code> is a directive that create a data table.
    </p>

    <lx-component lx-title="Basic usage" lx-path="/includes/modules/data-table/includes/basic.html" lx-js-path="/js/data-table/demo/demo-data-table_controller.js"></lx-component>
    <lx-component lx-title="Layout example" lx-path="/includes/modules/data-table/includes/advanced.html" lx-js-path="/js/data-table/demo/demo-data-table_controller.js"></lx-component>

    <lx-component-attributes>
        <table>
            <thead>
                <tr>
                    <th>Parameter</th>
                    <th>Type</th>
                    <th>Default</th>
                    <th>Description</th>
                </tr>
            </thead>

            <tbody>
                <tr>
                    <td>lx-border</td>
                    <td><code>boolean</code></td>
                    <td><code>true</code></td>
                    <td>Specify if the data datable rows have border.</td>
                </tr>
                <tr>
                    <td>lx-selectable</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Specify if the data datable is selectable or not.</td>
                </tr>
                <tr>
                    <td>lx-tbody</td>
                    <td><code>object</code></td>
                    <td></td>
                    <td>Define the data table tbody. Refer to the demo controller.</td>
                </tr>
                <tr>
                    <td>lx-thead</td>
                    <td><code>object</code></td>
                    <td></td>
                    <td>Define the data table thead. Refer to the demo controller.</td>
                </tr>
                <tr>
                    <td>lx-thumbnail</td>
                    <td><code>boolean</code></td>
                    <td><code>false</code></td>
                    <td>Make the first thead array element the row thumbnail. Format option should return a 40px squared image.</td>
                </tr>
            </tbody>
        </table>
    </lx-component-attributes>

    <lx-component-methods lx-title="Events">
        <lx-component-method lx-name="lx-data-table__select" lx-description="A broadcast is sent when a row is selected.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The broadcast original event.</td>
                    </tr>
                    <tr>
                        <td>selectedRows</td>
                        <td><code>array</code></td>
                        <td>The selected rows from tbody array.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="lx-data-table__unselect" lx-description="A broadcast is sent when a row is unselected.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The broadcast original event.</td>
                    </tr>
                    <tr>
                        <td>selectedRows</td>
                        <td><code>array</code></td>
                        <td>The selected rows from tbody array.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>

        <lx-component-method lx-name="lx-data-table__sort" lx-description="A broadcast is sent when a column is sorted.">
            <table>
                <thead>
                    <tr>
                        <th>Available parameter</th>
                        <th>Type</th>
                        <th>Description</th>
                    </tr>
                </thead>

                <tbody>
                    <tr>
                        <td>event</td>
                        <td><code>object</code></td>
                        <td>The broadcast original event.</td>
                    </tr>
                    <tr>
                        <td>column</td>
                        <td><code>object</code></td>
                        <td>The sorted column from thead array.</td>
                    </tr>
                </tbody>
            </table>
        </lx-component-method>
    </lx-component-methods>
</div>